<template>
  <!-- v-model是双向绑定
    把值给视图
    视图发生了变化 也可以去自动去改值
    当点击X 或者close的时候- a-modal里面的按钮触发了事件 尝试改变 showDialog
  -->
  <a-modal title="新增员工" @cancel="btnCancel" @ok="btnOK" v-model:visible="showDialogComputed">
    <!-- labelCol定义 表单中左侧标题的一个宽度 -->
    <a-form :labelCol="{ span: 4 }">
      <a-form-item label="用户名" name="username" v-bind="form.validateInfos.username">
        <a-input v-model:value="formData.username" placeholder="请输入用户名"></a-input>
      </a-form-item>
      <a-form-item label="手机号" name="mobile" v-bind="form.validateInfos.mobile">
        <a-input v-model:value="formData.mobile" placeholder="请输入手机号"></a-input>
      </a-form-item>
      <a-form-item label="入职时间" name="timeOfEntry" v-bind="form.validateInfos.timeOfEntry">
        <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="formData.timeOfEntry" placeholder="请选择入职时间">
        </a-date-picker>
      </a-form-item>
      <a-form-item label="聘用形式" name="formOfEmployment" v-bind="form.validateInfos.formOfEmployment">
        <a-select v-model:value="formData.formOfEmployment" placeholder="请选择聘用形式">
          <a-select-option :value="1">正式</a-select-option>
          <a-select-option :value="2">外包</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="工号" name="workNumber" v-bind="form.validateInfos.workNumber">
        <a-input-number v-model:value="formData.workNumber" placeholder="请输入工号"></a-input-number>
      </a-form-item>
      <a-form-item label="部门" name="departmentName" v-bind="form.validateInfos.departmentName">
        <a-input v-model:value="formData.departmentName" placeholder="请选择部门"></a-input>
      </a-form-item>
      <a-form-item label="转正时间" name="correctionTime" v-bind="form.validateInfos.correctionTime">
        <a-date-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="formData.correctionTime" placeholder="请选择转正时间">
        </a-date-picker>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { computed, ref, reactive } from 'vue'
import { Form, message } from 'ant-design-vue';
import { addEmployee } from '@/api/employee'
// 定义初始值的一个空对象
const initValues = {
  username: '',
  mobile: '',
  formOfEmployment: '',
  workNumber: '',
  departmentName: '',
  timeOfEntry: '',
  correctionTime: ''
}
const formData = ref(initValues) // 声明一个响应式数据
// 校验规则
const rules = reactive({
  username: [
    { required: true, message: '用户姓名不能为空', trigger: 'blur' },
    // min 最短长度 max最大长度
    {
      min: 1,
      max: 4,
      message: '用户姓名为1-4位'
    }
  ],
  mobile: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号格式不正确',
      trigger: 'blur'
    }
  ],
  formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
  workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
  departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
  timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }]
})
const form = Form.useForm(formData.value, rules) // ref声明的数据在 js中必须加.value

// props是单向数据流- 只能在父组件中修改  不能在子组件修改
const { showDialog } = defineProps({
  showDialog: Boolean
})
const emits = defineEmits(["update:showDialog", "addSuccess"]) // 得到一个事件触发器
// v-model- 监听了子组件传过来的事件 update:modelValue

// 使用计算属性解决该问题

// 只是依赖数据的变化 而计算- 数据的修改 和读取
// 这是最基础的写法
// computed(() => {
//   return 1
// })
const showDialogComputed = computed({
  // 要读取值的时候 会调用get方法
  get() {
    return showDialog // 读取的值是 props传过来的值
  },
  // 设置值的时候 调用set方法
  set(val) {
    // val是 v-model尝试改变的值
    // 需要从 父组件去入手 子传父
    emits("update:showDialog", val) // 告诉父组件 要改变showDialog的值为val
  }
})

// 点击确定按钮的方法
const btnOK = async () => {
  // 做相关的操作
  await form.validate()
  // 走到这个位置 说明校验通过了
  await addEmployee(formData.value) // 要传递表单的数据
  // 新增成功了
  message.success("新增员工成功")

  btnCancel() // 清空一下

  // 关闭弹层
  showDialogComputed.value = false // 关闭弹层

  // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
  // 告诉父组件
  emits("addSuccess") // 触发一个addSuccess事件

}

const btnCancel = () => {
  form.resetFields() // 清除数据 并且清除校验
}
</script>
